<template>  
    <button :class="classes" @click="onClick" :type="htmlType" :disabled="disabled">
      <Icon v-if="icon" :type="icon" />
      <slot></slot>
    </button>
</template>
<script>
import { oneOf } from "../../utils/assist";
import Icon from "../icon";

const prefixCls = "layui-btn";
export default {
  components: { Icon },
  name: "Button",
  props: {
    htmlType: {
      default: "button",
      validator(value) {
        return oneOf(value, ["button", "submit", "reset"]);
      }
    },
    type: {
      validator(value) {
        return oneOf(value, ["primary", "normal", "warm", "danger"]);
      }
    },
    size: {
      validator(value) {
        return oneOf(value, ["xs", "sm", "lg"]);
      }
    },
    icon: String,
    disabled: Boolean,
    radius: Boolean
  },
  data() {
    return {
      text: "xxx"
    };
  },
  computed: {
    classes() {
      return [
        prefixCls,
        {
          [`${prefixCls}-${this.type}`]: !!this.type,
          [`${prefixCls}-${this.size}`]: !!this.size,
          [`${prefixCls}-disabled`]: this.disabled,
          [`${prefixCls}-radius`]: this.radius
        }
      ];
    }
  },
  methods: {
    onClick(e) {
      this.$emit("click", event);
    }
  }
};
</script>
<style scoped>

</style>
